<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指标对比界面</title>
    <script type="text/javascript" src="res/layui/layui.js"></script>
    <script src="res/js/jquery-3.4.1.min.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet"
          href="res/zTree_v3-master/css/metroStyle/metroGreen.css"
          type="text/css">
    <script type="text/javascript" src="res/js/base.js"></script>
    <script src="js/Convert_Pinyin.js"></script>
    <link rel="stylesheet" href="res/layui/css/layui.css" media="all">
    <script src="js/login_common.js"></script>
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript" src="res/module/common.js"></script>
    <script type="text/javascript" src="res/module/treeSelect/treeSelect.js"></script>

    <!--<script type="text/javascript">

        //全局同步
        $.ajaxSetup({
            async: false
        });
    </script>-->
    <style>
        .zb:hover{
            cursor:pointer
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>指标对比界面</legend>
</fieldset>
<div  style="margin-top: 10px; padding-right: 27px;">
    <form class="layui-form" id="idform" action="" method="post"

          enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">体育项目</label>
            <div class="layui-input-block">
                <select lay-verify="required" id="sportId" name="sportId" lay-filter="atsProject" xm-select="select13"
                        xm-select-radio="" xm-select-skin="danger" xm-select-search="" xm-select-search-type="dl">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择运动员</label>
            <div class="layui-input-block">
            <select lay-verify="required" id="athleteIds" name="athleteIds" lay-filter="ydy" xm-select="example9_1"
                    xm-select-show-count="5" xm-select-search="" xm-select-search-type="dl" xm-select-skin="normal"
                    xm-select-max="3">

            </select>
        </div>
        </div>
        <div id="choceThing">

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择指标</label>
            <div id="choiceItem" class="layui-input-block">
                <input lay-verify="required" type="text" id="tree" placeholder=""
                       lay-filter="tree" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit
                        lay-filter="demo1">立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<div id="mainDiv"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">

    layui.use(['form','layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        //自定义验证规则
        /* form.verify({
             title: function(value){
                 if(value.length < 5){
                     return '标题至少得5个字符啊';
                 }
             }
             ,phone: [
                 /^1[3456789]\d{9}$/
                 ,'电话,岂能填错！'
             ]
         });*/
        //监听提交
        var num = 0;
        form.on('submit(demo1)', function (data) {
            var index1 = layer.load(0); //添加laoding,0-2两种方式
            var form = new FormData(document.getElementById("idform"));
            $.ajax({
                url: getRootPath() + "atsBaseMap/selectItemTu",
                type: "post",
                data: form,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function (obj) {
                    layer.close(index1);    //返回数据关闭loading
                    $("#mainDiv").html("");//清空这个div
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(obj,function(index,item){
                        if(item.itemName != null){
                            num+=1;
                            $("#mainDiv").append("<fieldset class='layui-elem-field layui-field-title zb' onclick='dainji(this)' id='zb"+num+"'><legend class='bnm'>"+item.itemName+"对比<spen><i class='layui-icon'>&#xe625;</i><spen hidden>hid</spen></spen> </legend></fieldset><div id='main"+num+"' style='height:500px;'></div>");
                            var myChart = echarts.init(document.getElementById('main'+num), 'light');
                            // 显示标题，图例和空的坐标轴
                            myChart.setOption({
                                title: {
                                    text: item.itemName,
                                    subtext: '单位： '+item.itemUnit
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                legend: {
                                    data: item.ydata
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'value',
                                    boundaryGap: [0, 0.01]
                                },
                                yAxis: {
                                    type: 'category',
                                    data: item.ldata
                                },
                                series:  item.dataAll
                            });
                            window.addEventListener("resize", () => {
                                myChart.resize();
                        });
                        }
                    })
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                }
            });

            return false;
        });
    });
    function dainji(obj) {
        $("#main"+$(obj).prop('id').substr(2)).toggle(500);
        if( $(obj).find("legend").find("spen").find("spen").text()=="hid"){
            $(obj).find("legend").find("spen").html('<i class="layui-icon">&#xe623;</i><spen hidden>hids</spen>');
        }else{
            $(obj).find("legend").find("spen").html('<i class="layui-icon">&#xe625;</i><spen hidden>hid</spen>');
        }
    }
</script>
<link rel="stylesheet" href="res/formSelects/formSelects-v4.css" media="all">
<script src="res/formSelects/formSelects-v4.js"></script>
<script src="js/xm-select.js"></script>
<script src="js/atsBaseMapHead.js"></script>
</body>
</html>